<!--
 * @Author: wangming
 * @Date: 2021-11-05 15:52:51
 * @LastEditors: wangming
 * @LastEditTime: 2021-11-08 09:50:33
 * @FilePath: /hanma-application-designer-fed/src/components/dynamicForm/rightModel/components/hmLabelStyle.vue
 * @Description:
-->
<template>
  <div>
    <el-form-item label="标签后缀">
      <el-input
        v-model="value.__config.labelSuffix"
        size="small"
        placeholder="请输入标签后缀"
      ></el-input>
    </el-form-item>
    <el-form-item label="标签字号（px）">
      <el-input-number
        style="width: 100%"
        v-model="value.__config.labelFontSize"
        controls-position="right"
        :min="10"
        :max="200"
        :precision="0"
        placeholder="请输入标签字号"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="标签颜色">
      <el-color-picker
        v-model="value.__config.labelColor"
        :predefine="predefineColors"
      ></el-color-picker>
    </el-form-item>
    <el-form-item label="标签样式">
      <el-checkbox-group v-model="value.__config.labelStyle" size="mini">
        <el-checkbox-button
          v-for="(item, index) in stylelist"
          :key="index"
          :label="item.classvalue"
        >
          <i class="iconfont b f12" :class="item.icon"></i>
        </el-checkbox-button>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script>
import basicmixins from "./basicmixins";
import { PREDEFINE_COLORS } from "@/utils/const";
export default {
  mixins: [basicmixins],
  data() {
    return {
      predefineColors: PREDEFINE_COLORS,
      stylelist: [
        { classvalue: "b", icon: "iconjiacu1" },
        { classvalue: "tdl", icon: "iconxiahuaxian" },
        { classvalue: "tdlh", icon: "iconshanchuxian" },
        { classvalue: "i", icon: "iconqingxie" },
      ],
    };
  },
  created() {
    if (!this.value.__config.labelStyle) {
      this.$set(this.value.__config, "labelStyle", []);
    }
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}
</style>
